<template>
  <div class="login">
    <el-form :model="form" class="loginForm" label-width="auto">
      <h1>首次登录请填写以下信息哦~</h1>
      <div style="text-align: center; margin: 0 20px">
        <v-form-render
          :form-json="formJson"
          :form-data="formData"
          :option-data="optionData"
          ref="vFormRef"></v-form-render>
      </div>
    </el-form>
    <div class="button">
      <el-button size="large" type="success" @click="handleToHome()">
        前往首页
        <el-icon class="el-icon--right"><ArrowRight /></el-icon>
      </el-button>
    </div>
  </div>
</template>

<script setup>
import router from "@/router";
import { onMounted, reactive, ref } from "vue";
import to from "await-to-js";
import { login as loginApi } from "@/api/login/index.js";
import { submit as submitApi, testSubmit as testSubmitApi } from "../../api/view";
import { ElMessage } from "element-plus";
const formData = reactive({});
const optionData = reactive({});
const vFormRef = ref(null);
const formJson = reactive({
  widgetList: [
    {
      key: 45160,
      type: "radio",
      icon: "radio-field",
      formItemFlag: true,
      options: {
        name: "1",
        label: "问题1：我更喜欢独处而不是和别人在一起",
        labelAlign: "label-left-align",
        defaultValue: null,
        columnWidth: "200px",
        size: "",
        displayStyle: "inline",
        buttonStyle: false,
        border: false,
        labelWidth: null,
        labelHidden: false,
        disabled: false,
        hidden: false,
        optionItems: [
          {
            label: "从不",
            value: "1",
          },
          {
            label: "很少",
            value: "2",
          },
          {
            label: "有时",
            value: "4",
          },
          {
            value: "6",
            label: "经常",
          },
        ],
        required: false,
        requiredHint: "",
        validation: "",
        validationHint: "",
        customClass: [],
        labelIconClass: null,
        labelIconPosition: "rear",
        labelTooltip: null,
        onCreated: "",
        onMounted: "",
        onChange: "",
        onValidate: "",
      },
      id: "radio102349",
    },
    {
      key: 45160,
      type: "radio",
      icon: "radio-field",
      formItemFlag: true,
      options: {
        name: "2",
        label: "问题2：我很少感到焦虑或紧张",
        labelAlign: "",
        defaultValue: null,
        columnWidth: "200px",
        size: "",
        displayStyle: "inline",
        buttonStyle: false,
        border: false,
        labelWidth: null,
        labelHidden: false,
        disabled: false,
        hidden: false,
        optionItems: [
          {
            label: "从不",
            value: "1",
          },
          {
            label: "很少",
            value: 2,
          },
          {
            label: "有时",
            value: "4",
          },
          {
            value: "6",
            label: "经常",
          },
        ],
        required: false,
        requiredHint: "",
        validation: "",
        validationHint: "",
        customClass: "",
        labelIconClass: null,
        labelIconPosition: "rear",
        labelTooltip: null,
        onCreated: "",
        onMounted: "",
        onChange: "",
        onValidate: "",
      },
      id: "radio89142",
    },
    {
      key: 45160,
      type: "radio",
      icon: "radio-field",
      formItemFlag: true,
      options: {
        name: "3",
        label: "问题3：当面对困难时，我喜欢寻找别人的意见",
        labelAlign: "",
        defaultValue: null,
        columnWidth: "200px",
        size: "",
        displayStyle: "inline",
        buttonStyle: false,
        border: false,
        labelWidth: null,
        labelHidden: false,
        disabled: false,
        hidden: false,
        optionItems: [
          {
            label: "从不",
            value: "1",
          },
          {
            label: "很少",
            value: "2",
          },
          {
            label: "有时",
            value: "4",
          },
          {
            value: "6",
            label: "经常",
          },
        ],
        required: false,
        requiredHint: "",
        validation: "",
        validationHint: "",
        customClass: "",
        labelIconClass: null,
        labelIconPosition: "rear",
        labelTooltip: null,
        onCreated: "",
        onMounted: "",
        onChange: "",
        onValidate: "",
      },
      id: "radio81131",
    },
    {
      key: 45160,
      type: "radio",
      icon: "radio-field",
      formItemFlag: true,
      options: {
        name: "4",
        label: "问题4：我通常不会因为小事而感到烦恼",
        labelAlign: "",
        defaultValue: null,
        columnWidth: "200px",
        size: "",
        displayStyle: "inline",
        buttonStyle: false,
        border: false,
        labelWidth: null,
        labelHidden: false,
        disabled: false,
        hidden: false,
        optionItems: [
          {
            label: "从不",
            value: 1,
          },
          {
            label: "很少",
            value: 2,
          },
          {
            label: "有时",
            value: "4",
          },
          {
            value: "6",
            label: "经常",
          },
        ],
        required: false,
        requiredHint: "",
        validation: "",
        validationHint: "",
        customClass: "",
        labelIconClass: null,
        labelIconPosition: "rear",
        labelTooltip: null,
        onCreated: "",
        onMounted: "",
        onChange: "",
        onValidate: "",
      },
      id: "radio25112",
    },
    {
      key: 45160,
      type: "radio",
      icon: "radio-field",
      formItemFlag: true,
      options: {
        name: "5",
        label: "问题5：我更喜欢有计划和结构化的日子",
        labelAlign: "",
        defaultValue: null,
        columnWidth: "200px",
        size: "",
        displayStyle: "inline",
        buttonStyle: false,
        border: false,
        labelWidth: null,
        labelHidden: false,
        disabled: false,
        hidden: false,
        optionItems: [
          {
            label: "从不",
            value: "1",
          },
          {
            label: "很少",
            value: "2",
          },
          {
            label: "有时",
            value: "4",
          },
          {
            value: "6",
            label: "经常",
          },
        ],
        required: false,
        requiredHint: "",
        validation: "",
        validationHint: "",
        customClass: "",
        labelIconClass: null,
        labelIconPosition: "rear",
        labelTooltip: null,
        onCreated: "",
        onMounted: "",
        onChange: "",
        onValidate: "",
      },
      id: "radio17142",
    },
    {
      key: 45160,
      type: "radio",
      icon: "radio-field",
      formItemFlag: true,
      options: {
        name: "6",
        label: "问题6：我在社交场合中通常感到自在",
        labelAlign: "",
        defaultValue: null,
        columnWidth: "200px",
        size: "",
        displayStyle: "inline",
        buttonStyle: false,
        border: false,
        labelWidth: null,
        labelHidden: false,
        disabled: false,
        hidden: false,
        optionItems: [
          {
            label: "从不",
            value: "1",
          },
          {
            label: "很少",
            value: "2",
          },
          {
            label: "有时",
            value: "4",
          },
          {
            value: "6",
            label: "经常",
          },
        ],
        required: false,
        requiredHint: "",
        validation: "",
        validationHint: "",
        customClass: "",
        labelIconClass: null,
        labelIconPosition: "rear",
        labelTooltip: null,
        onCreated: "",
        onMounted: "",
        onChange: "",
        onValidate: "",
      },
      id: "radio50794",
    },
    {
      key: 45160,
      type: "radio",
      icon: "radio-field",
      formItemFlag: true,
      options: {
        name: "7",
        label: "问题7：如果可能，我愿意从事帮助他人的工作。",
        labelAlign: "",
        defaultValue: null,
        columnWidth: "200px",
        size: "",
        displayStyle: "inline",
        buttonStyle: false,
        border: false,
        labelWidth: null,
        labelHidden: false,
        disabled: false,
        hidden: false,
        optionItems: [
          {
            label: "从不",
            value: 1,
          },
          {
            label: "很少",
            value: 2,
          },
          {
            label: "有时",
            value: "4",
          },
          {
            value: "6",
            label: "经常",
          },
        ],
        required: false,
        requiredHint: "",
        validation: "",
        validationHint: "",
        customClass: "",
        labelIconClass: null,
        labelIconPosition: "rear",
        labelTooltip: null,
        onCreated: "",
        onMounted: "",
        onChange: "",
        onValidate: "",
      },
      id: "radio38979",
    },
    {
      key: 45160,
      type: "radio",
      icon: "radio-field",
      formItemFlag: true,
      options: {
        name: "8",
        label: "问题8：我经常对自己的行为进行反思",
        labelAlign: "",
        defaultValue: null,
        columnWidth: "200px",
        size: "",
        displayStyle: "inline",
        buttonStyle: false,
        border: false,
        labelWidth: null,
        labelHidden: false,
        disabled: false,
        hidden: false,
        optionItems: [
          {
            label: "从不",
            value: 1,
          },
          {
            label: "很少",
            value: 2,
          },
          {
            label: "有时",
            value: "4",
          },
          {
            value: "6",
            label: "经常",
          },
        ],
        required: false,
        requiredHint: "",
        validation: "",
        validationHint: "",
        customClass: "",
        labelIconClass: null,
        labelIconPosition: "rear",
        labelTooltip: null,
        onCreated: "",
        onMounted: "",
        onChange: "",
        onValidate: "",
      },
      id: "radio54549",
    },
    {
      key: 45160,
      type: "radio",
      icon: "radio-field",
      formItemFlag: true,
      options: {
        name: "9",
        label: "问题9：我很容易被周围的情绪所影响",
        labelAlign: "",
        defaultValue: null,
        columnWidth: "200px",
        size: "",
        displayStyle: "inline",
        buttonStyle: false,
        border: false,
        labelWidth: null,
        labelHidden: false,
        disabled: false,
        hidden: false,
        optionItems: [
          {
            label: "从不",
            value: "1",
          },
          {
            label: "很少",
            value: "2",
          },
          {
            label: "有时",
            value: "4",
          },
          {
            value: "6",
            label: "经常",
          },
        ],
        required: false,
        requiredHint: "",
        validation: "",
        validationHint: "",
        customClass: "",
        labelIconClass: null,
        labelIconPosition: "rear",
        labelTooltip: null,
        onCreated: "",
        onMounted: "",
        onChange: "",
        onValidate: "",
      },
      id: "radio103173",
    },
    {
      key: 45160,
      type: "radio",
      icon: "radio-field",
      formItemFlag: true,
      options: {
        name: "10",
        label: "问题10：在团队中工作让我感到充满活力。",
        labelAlign: "",
        defaultValue: null,
        columnWidth: "200px",
        size: "",
        displayStyle: "inline",
        buttonStyle: false,
        border: false,
        labelWidth: null,
        labelHidden: false,
        disabled: false,
        hidden: false,
        optionItems: [
          {
            label: "从不",
            value: "1",
          },
          {
            label: "很少",
            value: "2",
          },
          {
            label: "有时",
            value: "4",
          },
          {
            value: "6",
            label: "经常",
          },
        ],
        required: false,
        requiredHint: "",
        validation: "",
        validationHint: "",
        customClass: "",
        labelIconClass: null,
        labelIconPosition: "rear",
        labelTooltip: null,
        onCreated: "",
        onMounted: "",
        onChange: "",
        onValidate: "",
      },
      id: "radio94704",
    },
  ],
  formConfig: {
    modelName: "formData",
    refName: "vForm",
    rulesName: "rules",
    labelWidth: 80,
    labelPosition: "top",
    size: "",
    labelAlign: "label-left-align",
    cssCode: "",
    customClass: [],
    functions: "",
    layoutType: "PC",
    jsonVersion: 3,
    onFormCreated: "",
    onFormMounted: "",
    onFormDataChange: "",
  },
});

const questionLen = formJson.widgetList.length;
const userInput = reactive({ scaleId: "1792180848093609986", resultData: [] });
const submit = () => {
  return new Promise((resolve, reject) => {
    vFormRef.value
      .getFormData()
      .then(async (formData) => {
        // Form Validation OK
        console.log(formData);
        let index = 1;
        userInput.resultData = [];
        for (let item in formData) {
          userInput.resultData.push({ sort: index, score: formData[item] });
          index++;
        }
        const filter = userInput.resultData.filter((item) => {
          console.log(item);
          return item.score != null;
        });
        console.log(filter.length, questionLen);
        if (filter.length != questionLen) {
          isSubmitted.value = false;
          ElMessage({
            type: "warning",
            message: "请先填完表单再访问首页哦！！",
          });
        } else {
          const [err, res] = await to(testSubmitApi(userInput));
          if (!err) {
            isSubmitted.value = true;
            resolve(res);
          } else {
            reject(err);
          }
        }
      })
      .catch((error) => {
        reject(error);
      });
  });
};
const isSubmitted = ref(false);
const handleToHome = async () => {
  const [err, res] = await to(submit());
  if (!err) {
    console.log(res);
    localStorage.setItem("tags", JSON.stringify(res.data.join(",")));
    router.push("/");
  } else {
    ElMessage({
      type: "warning",
      message: err,
    });
  }
};
// 挂载钩子
onMounted(async () => {
  if (!localStorage.getItem("token")) {
    await login();
  }
});
</script>

<style scoped>
.loginForm {
  width: 600px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 添加阴影效果 */
  border-radius: 10px; /* 添加圆角 */
  padding: 10px;
}
.login {
  height: 100vh; /* 设置整个页面高度为视口高度 */
  background: linear-gradient(to bottom, #a6caeb, #bee6cb); /* 渐变色 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.button {
  position: absolute;
  right: 10vw;
}
</style>
